<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ul">
        <li>1</li>
        <li name="li2">2</li>
        <li>3</li>
        <li name="color"></li>
        <li name="color"></li>
    </ul>
    <script>
        // getElementById(id)
        // 区分大小写
        let ul = document.getElementById("ul")
        console.log(ul) // ul>li*3 

        let ul1 = document.getElementById('UL')
        console.log(ul1) // null

        // getElementsByTagName()
        // 返回HTMLCollection, 与Nodelist一样，可以使用item[index]获取节点
        let lis = document.getElementsByTagName('li')
        console.log(lis)  // HTMLCollection(3) [li, li, li]

        console.log(lis.namedItem("li2")) // HTMLCollection对象的namedItem方法

        // NOTE: HTMLCollection对象可以写(index)也可以写["name"], 前者调用item()后者调用nameItem()

        console.log(document.getElementsByTagName("*")) // 获取所有元素  [html, head, meta, meta, ....]

        // getElementsByName(name) 返回给定name的所有节点
        console.log(document.getElementsByName('color')) // NodeList(2) [li, li]

    </script>
</body>
</html>